<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html, body {
            height: 100%;
            background-image: url(./img/bk_img_game_hall.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">对弈大厅</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="user_info"></div>
            <div id="help_msg">
                <p >感谢您的游玩，简单向您介绍一下功能：
                    <br>
                    随机匹配长时间未匹配到对手，后台将安排
                    Ai与您对战。作者也将持续升级Ai的博弈能力，欢迎您的挑战<br> <br>
                    欢迎您的建议和BUG反馈，祝您游戏愉快</p>
                <br>
                
                <p>QQ：1608802667</p>
                <p>邮箱：sprayrain@163.com</p>
                
            </div>
            <!-- 匹配按钮 -->
            
            <div id="match-button_1" class="button_style"><span>随机匹配</span></div>
            <div id="match-button_2" class="button_style"><span>创建房间</span></div>
            <div id="match-button_3" class="button_style"><span>观战棋局</span></div>
            <div id="match-button_4" class="button_style"><span>棋局复盘</span></div>

            <div id="ranking_list">
                <h1 style=" text-align: center;">天梯排行榜</h1>
                <table cellspacing="0px">
      
                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num first">1</span>
                            <span id="rank_1" class="sep">排行榜的榜首</span>
                        </td>
                        <td id="score_1" class="body_two">437</td>
                    </tr>
        
                    
                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num second">2</span>
                            <span id="rank_2" class="sep">排行榜的榜二</span>
                        </td>
                        <td id="score_2" class="body_two">1234</td>
                    </tr>
        
        
                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num third">3</span>
                            <span id="rank_3" class="sep">排行榜的榜三</span>
                        </td>
                        <td id="score_3" class="body_two">437</td>
                    </tr>
        
        
                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">4</span>
                            <span id="rank_4" class="sep">排行榜的榜四</span>
                        </td>
                        <td id="score_4" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">5</span>
                            <span id="rank_5" class="sep">排行榜的榜五</span>
                        </td>
                        <td id="score_5" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">6</span>
                            <span id="rank_6" class="sep">排行榜的榜六</span>
                        </td>
                        <td id="score_6" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">7</span>
                            <span id="rank_7" class="sep">排行榜的榜七</span>
                        </td>
                        <td id="score_7" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">8</span>
                            <span id="rank_8" class="sep">排行榜的榜八</span>
                        </td>
                        <td id="score_8" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">9</span>
                            <span id="rank_9" class="sep">排行榜的榜九</span>
                        </td>
                        <td id="score_9" class="body_two">437</td>
                    </tr>

                    <tr class="rank_content">
                        <td class="body_one"> 
                            <span class="num fourth">10</span>
                            <span id="rank_10" style="padding-left: 30px;">排行榜的榜十</span>
                        </td>
                        <td id="score_10" class="body_two">437</td>
                    </tr>
        
                </table>
            </div>
            
        </div>
    </div>
   

    <!-- 导入ajax包 -->
    <script src="./js/jquery.min.js"></script>

    <!-- 点击按钮触发事件 -->
    <script>
        var match_bt = document.getElementById("match-button_1");
        var match_bt_flag = "stop";
        match_bt.onclick = function(){
            if (match_bt_flag == "stop")
            {
                //没有进行匹配的状态下点击按钮，发送对战匹配请求
                var req_json = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else{
                //在匹配的状态下点击按钮，发送取消匹配请求
                var req_json = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }

        var self_room_bt = document.getElementById("match-button_2");
        self_room_bt.onclick = function(){
            console.log("断开大厅，准备进入创建房间页面");
            location.replace("./self_create_room.html");
        }

        var viewer_bt = document.getElementById("match-button_3");
        viewer_bt.onclick = function(){
            console.log("断开大厅，准备进入观战页面");
            location.replace("./viewer.html");
        }

        var viewer_bt = document.getElementById("match-button_4");
        viewer_bt.onclick = function(){
            console.log("断开大厅，准备进入复盘页面");
            location.replace("./replay.html");
        }
    </script>

    <!-- 页面请求处理事件 -->
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        window.onbeforeunload = function(){
            ws_hdl.close();
        }
        function ws_open(){
            console.log("websocket open");
        }
        function ws_close(){
            console.log("websocket close");
        }
        function ws_error(){
            console.log("websocket error");
        }
        function ws_message(evt){
            var rsp_json = JSON.parse(evt.data);
            if (rsp_json.result == false)
            {
                alert(rsp_json.reason);
                location.replace("/login.html");
                return;
            }
            if (rsp_json.optype == "hall_ready")
            {
                console.log("游戏大厅已连接");
            }
            else if (rsp_json.optype == "match_start")
            {
                console.log("已加入匹配队列");
                match_bt_flag = "start";
                match_bt.innerHTML = "匹配ing-点击停止";
            }
            else if (rsp_json.optype == "match_stop")
            {
                console.log("已取消匹配");
                match_bt_flag = "stop";
                match_bt.innerHTML = "开始匹配";
            }
            else if (rsp_json.optype == "match_success")
            {
                console.log("准备进入游戏房间");
                location.replace("/game_room.html");
            }
        }

        function get_user_info(){
            $.ajax({
                url:'/userinfo',
                type:'GET',
                success(res){
                    if (res.result == true)
                    {
                        var info_html = "<p>" + "用户： " + res.username + " 积分： " + res.score + 
                        "</br>" + "比赛场次：" + res.total_count + " 获胜场次：" + res.win_count + "</p>";
                        var user_info_div = document.getElementById("user_info");
                        user_info_div.innerHTML = info_html;
                        get_rank_list();

                        //获取用户信息成功，就要切换到长连接
                        ws_hdl = new WebSocket(ws_url);
                        ws_hdl.onclose = ws_close;
                        ws_hdl.onopen = ws_open;
                        ws_hdl.onerror = ws_error;
                        ws_hdl.onmessage = ws_message;

                    }
                    else{
                        alert("获取用户信息失败");
                        location.replace("/login.html");
                    }
                },

                error(xhr){
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            })
        }

        function get_rank_list(){
            $.ajax({
                url:'/rank_list',
                type:'GET',
                success(res){
                    if (res.result == true)
                    {
                        for (var i = 1; i <= 10; i++)
                        {
                            var tmp = 'rank_';
                            tmp += i;
                            document.getElementById(tmp).innerHTML = res[tmp];
                        }

                        for (var i = 1; i <= 10; i++)
                        {
                            var tmp = 'score_';
                            tmp += i;
                            document.getElementById(tmp).innerHTML = res[tmp];
                        }
                    }
                    else
                    {
                        alert("登录失效");
                        location.replace("/login.html");
                    }
                },
                error(xhr){
                    alert(JSON.stringify(xhr));
                }
            })
        }
        get_user_info();
    </script>
</body>
</html>